<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Personal Info</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
    <h1>Please Enter Your Details For Our Dating Websites!</h1>
    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>Your Face</legend>

            <label for="image" class="text">Your image:</label>
            <input type="file" id="image" onchange="setPreviewImg()" required><br>

            <label for="preview" class="text">Image preview:</label>
            <img id="preview" src="" ><br>

        </fieldset>

        <fieldset>
            <legend>Your Genetal Details</legend>

            <label for="name" class="text">Name:</label>
            <input type="text" id="name" name="name" required><br>

            <label>Gender:</label>
            <input type="radio" class="radio" name="gender" value="male" required>Male
            <input type="radio" class="radio" name="gender" value="female" required>Female<br>

            <label for="age" class="text">Age:</label>
            <input type="number" id="age" name="age" required><br>

            <label for="birthday" class="text">Date of birth:</label>
            <input type="date" id="birthday" name="birthday"><br>

            <label for="fav-color" class="text">Favourite color:</label>
            <input type="color" id="fav-color" name="fav-color"><br>

            <label for="countries" class="text">Which country:</label>
                <select id="countries" name="countries">
                    <option value=""></option>
                    <option value="">China</option>
                    <option value="">Germary</option>
                    <option value="">England</option>
                    <option value="">France</option>
                    <option value="">Italy</option>
                </select><br>
        </fieldset>

        <fieldset>
            <legend>Your Indicators</legend>

            <label for="height" class="text">Height:</label>
            <span class="rangeWord rangeLeft">Short</span>
            <input type="range" id="height" name="height" min="0" max="100" value="50" step="5">
            <span class="rangeWord rangeRight">Tall</span><br>

            <label for="salary" class="text">Salary:</label>
            <span class="rangeWord rangeLeft">Poor</span>
            <input type="range" id="salary" name="salary" min="0" max="100" step="5" value="50">
            <span class="rangeWord rangeRight">Rich</span><br>
        </fieldset>

        <fieldset>
            <legend>Your Contact Information</legend>

            <label for="email" class="text">Email:</label>
            <input type="email" id="email" name="email" required><br>

            <label for="telphone" class="text">Mobile:</label>
            <input type="tel" id="telphone" name="telphone"><br>

            <label for="address" class="text">Address:</label>
            <textarea id="address" name="address"></textarea><br>

            <label>Method to contact you:</label>
            <input type="checkbox" class="checkbox" name="contact-way" value="email">Email
            <input type="checkbox" class="checkbox" name="contact-way" value="whatsapp">Whatsapp
            <input type="checkbox" class="checkbox" name="contact-way" value="in-app">In-app chart<br>
        </fieldset>

        <input type="submit" value="Submit">
    </form>
</body>
</html>